<?php
	session_start();
?>
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>iQuit | Motivate</title>
        <meta name="description" content="A mobile application to help you quit smoking.">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="css/style.css">
		<link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
		<script src="js/jquery.nicescroll.js"></script>
		<script>
			function init() {
				$("#scroller").niceScroll({autohidemode:false});
				
				function updateList() {
					var xmlhttp;
					
					$("#scroller").niceScroll({autohidemode:false});
					if (window.XMLHttpRequest){	// code for IE7+, Firefox, Chrome, Opera, Safari
						xmlhttp = new XMLHttpRequest();
					}
					else {// code for IE6, IE5
						xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
					}
					
					xmlhttp.onreadystatechange = function() {
						if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
							document.getElementById("benefits").innerHTML = xmlhttp.responseText;
						}
					}
					
					var info = document.getElementById("time-select");
					xmlhttp.open("GET", "health-list.php?a=" + info.options[info.selectedIndex].text, true);
					xmlhttp.send();
					
				}
				
				document.getElementById("time-select").addEventListener('change', updateList, false);
			}
			
			window.addEventListener('load', init, false);			
		</script>
	</head>
	<body>
		<div id="main-wrapper">
			<?php 
				include "includes/nav.php";
			?>
			<header>
				iQuit
			</header>
			<div id="scroller">
				<div id="content">
					<div class="contentmargins">
						<h2>See how your health improves</h2>				
						<!--<div class="styled-select" id="strategy-styled-select">
							<select id="time-select">						
								<option value="12hr">12 Hours</option>
								<option value="3dy">3 Days</option>
								<option value="1mth">1 Month</option>
								<option value="2mth">2 Months</option>
								<option value="9mth">9 Months</option>
								<option value="12mth">12 Months</option>
								<option value="5yr">5 Years</option>
								<option value="10yr">10 Years</option>
								<option value="15yr">15 Years</option>
							</select>
						</div>-->
						<br/>
						<table>
							<tr>
								<td valign="top" style="border-left: 1px solid #4BC0AF;">
								
								
								</td>
								<td valign="top" style="padding-left: 20px;">
								
								<span style="color: #4BC0AF;">12 Hours</span><br/><div style="float: left; width: 10px; border-bottom: 1px solid #4BC0AF; margin-left: -25px; margin-top: -10px;"></div>
								<span style="font-size: 12px;">The carbon monoxide level in your blood will return to normal and the level of oxygen in your blood will start to increase. Almost all the nicotine will have been metabolised and excreted from your body.<br/><br/>
								</span>
								<span style="color: #4BC0AF;">3 Days</span><br/><div style="float: left; width: 10px; border-bottom: 1px solid #4BC0AF; margin-left: -25px; margin-top: -10px;"></div>
								<span style="font-size: 12px;">Breath will smell fresher, your clothes and hair will smell less of cigarettes, your meals will taste better and the nicotine stains on your fingers will start to disappear.<br/><br/>
								</span>
								<span style="color: #4BC0AF;">1 Month</span><br/><div style="float: left; width: 10px; border-bottom: 1px solid #4BC0AF; margin-left: -25px; margin-top: -10px;"></div>
								<span style="font-size: 12px;">Your blood pressure will return to normal levels.<br/><br/>
								</span>
								<span style="color: #4BC0AF;">2 Months</span><br/><div style="float: left; width: 10px; border-bottom: 1px solid #4BC0AF; margin-left: -25px; margin-top: -10px;"></div>
								<span style="font-size: 12px;">Your blood circulation will start to improve and blood will flow more easily to hands and feet. Your risk of heart attack will start to drop and your lung function will begin to improve.<br/><br/>
								</span>
								<span style="color: #4BC0AF;">9 Months</span><br/><div style="float: left; width: 10px; border-bottom: 1px solid #4BC0AF; margin-left: -25px; margin-top: -10px;"></div>
								<span style="font-size: 12px;">Any breathlessness and coughing that you've been experiencing will decrease.<br/><br/>
								</span>
								<span style="color: #4BC0AF;">12 Months</span><br/><div style="float: left; width: 10px; border-bottom: 1px solid #4BC0AF; margin-left: -25px; margin-top: -10px;"></div>
								<span style="font-size: 12px;">Your risk of dying from coronary heart disease will be half that of a continuing smoke.<br/><br/>
								</span>
								<span style="color: #4BC0AF;">5 Years</span><br/><div style="float: left; width: 10px; border-bottom: 1px solid #4BC0AF; margin-left: -25px; margin-top: -10px;"></div>
								<span style="font-size: 12px;">Your risk of stroke reduces significantly.<br/><br/>
								</span>
								<span style="color: #4BC0AF;">10 Years</span><br/><div style="float: left; width: 10px; border-bottom: 1px solid #4BC0AF; margin-left: -25px; margin-top: -10px;"></div>
								<span style="font-size: 12px;">Your lung cancer death rate will reduce to less than half of a continuing smoker, your risk of cancers of the mouth, throat, oesophagus, bladder, kidney and pancreas will also decrease.<br/><br/>
								</span>
								<span style="color: #4BC0AF;">15 Years</span><br/><div style="float: left; width: 10px; border-bottom: 1px solid #4BC0AF; margin-left: -25px; margin-top: -10px;"></div>
								<span style="font-size: 12px;">Your risk of coronary heart disease and stroke will reduce to that of a non-smoker<br/><br/>
								</span>
								</td>
								
							</tr>
						</table>
						<div id="benefits">
						</div>
						<div id="copyright">
						<p>Information from http://www.mayoclinic.com/health/nicotine-craving/SK00057</p>
						</div>
					</div>			
					<div id="twitter">
						<p>Can't find what you're looking for?  Tweet about it!</p>
						<input type="text" value ="#iQuit your text here" id="twitter-post" name="twitter-post"/>
						<button type="button" value="tweet" id="tweet" name="Tweet">Tweet</button>
					</div>			
				</div>
			</div>
		</div>
	</body>
</html>